import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init('WebGL-output-renderer');
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="渲染器">
        <Typography>
          <Paragraph>
            <Text>alpha: 透明背景</Text>
          </Paragraph>
          <Paragraph>
            <Text>layers: 物体只有和Camera在同一个层时才可见</Text>
            <a href="https://threejs.org/docs/index.html?q=object#api/zh/core/Layers">
              https://threejs.org/docs/index.html?q=object#api/zh/core/Layers
            </a>
          </Paragraph>
        </Typography>

        <div
          id="WebGL-output-renderer"
          style={{ width: '600px', height: '600px', position: 'relative' }}
        />
      </Card>
    );
  }
}
